<template>
    <div class="chart-page flex-row pd20 mini-gray-bg">
		<div class="tab-box overflowy write-bg" v-if="talklist.length">
			<div class="flex-column item pd10-row pd20-column pointer" @click="checkchart(v,i)" :class="[idx==i?'active':'']" v-for="(v,i) in talklist" :key="i">
				<div class="flex-row-center base-size mb5">
					<span class="lineOne flex1">{{v.mechanismname}}</span>
				</div>
				<span class="lineOne mini-gray-size">{{v[`${proxy.$route.query.type}name`]}}</span>
			</div>
		</div>
		<router-view v-slot="{ Component }">
			<keep-alive>
				<component :is="Component" v-if="$route.meta.keepAlive" :key="$route.path"/>
			</keep-alive>
			<component :is="Component" v-if="!$route.meta.keepAlive"/>
		</router-view>
    </div>
</template>
<script setup>
    import { reactive,ref,getCurrentInstance,toRefs,toRaw,watch,onMounted,nextTick } from 'vue'
    let { proxy } = getCurrentInstance()
    let obj = reactive({
		talklist: [],
		idx: 0
    });

	const init = ()=>{
		getchartlist()
	}

	let getchartlist = ()=>{
        proxy.$ajax({url: `/talk/${proxy.$route.query.type}/list`,data:{currentpage:1,pagesize:10000},bfLoading: true}).then(d => {
            if(d.success){
				talklist.value = d.msg.list||[]
				let query = proxy.$route.query;
				let newchart = true;//是否新建聊天
				talklist.value.forEach((e,i)=>{
					if(e[`${proxy.$route.query.type}_id`]==query.id&&e.mechanism_id==query.mechanism_id&&e.mechanismname==query.mechanism_name){
						idx.value = i;
						newchart = false;
					}
				})
				if(newchart){
					idx.value = 0;
					let o = {}
					switch (proxy.$route.query.type) {
						case 'train':
							o = {
								train_id: proxy.$route.query.id,
								trainname: proxy.$route.query.name,
								mechanism_id: proxy.$route.query.mechanism_id,
								mechanismname: proxy.$route.query.mechanism_name,
							}
							break;
						case 'insurance':
							o = {
								insurance_id: proxy.$route.query.id,
								insurancename: proxy.$route.query.name,
								mechanism_id: proxy.$route.query.mechanism_id,
								mechanismname: proxy.$route.query.mechanism_name,
							}
							break;
						case 'banking':
							o = {
								banking_id: proxy.$route.query.id,
								bankingname: proxy.$route.query.name,
								mechanism_id: proxy.$route.query.mechanism_id,
								mechanismname: proxy.$route.query.mechanism_name,
							}
							break;
					
						default:
							break;
					}
					talklist.value.unshift(o);
				}
            }
        }).catch(e => {
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
	}

	let checkchart =(row,i)=>{
        proxy.routerPushMixin('/chartmechanismdetail',{
            id: row[`${proxy.$route.query.type}_id`],
            name: row[`${proxy.$route.query.type}name`],
            mechanism_id: row.mechanism_id,
            mechanism_name: row.mechanismname,
            type: proxy.$route.query.type
        })
		idx.value = i;
	}


	init()
    let { talklist,idx } = toRefs(obj)
    
</script>

<style lang="scss" scoped>
	.chart-page{
		width: 100vw;height: 100vh;overflow: hidden;
	}
	.tab-box{
		width: 200px;height: 100%;
		border-right: solid 1px #f0f0f0;box-sizing: border-box;
		.item{
			border-bottom: solid 1px #f0f0f0;box-sizing: border-box;
		}
		.active{
			background: #f9fbff;color: #409eff;
		}
	}
</style>